<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码登录</title>
    <!-- 引入Bootstrap的CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        body {
            background-image: url('../static/index_src.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .blur-background {
            position: absolute;
            top: 0;
            right: 0;
            width: 30%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            z-index: 0;
        }
        .form-container {
            position: absolute;
            top: 30%;
            left: 77%;
            width: 300px;
            height: auto;
            transform: translate(-50%, -50%);
            z-index: 1;
            background: transparent;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            padding: 20px;
            animation: slideIn 0.5s forwards;
        }
        @keyframes slideInFromRight {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.form-container {
    animation: slideInFromRight 0.5s forwards;
}
        .form-container h1 {
            font-size: 25px;
            font-weight: 900;
            color: #323232;
            margin-bottom: 20px;
        }
        .form-container .form-control {
            width: 250px;
            height: 40px;
            border-radius: 5px;
            border: 2px solid #323232;
            background-color: #fff;
            box-shadow: 4px 4px #323232;
            font-size: 15px;
            font-weight: 600;
            color: #323232;
            padding: 5px 10px;
            outline: none;
        }
        .form-container .form-control:focus {
            border: 2px solid #2d8cf0;
        }
        .form-container .input-group-text {
            background-color: #fff;
            border: 2px solid #323232;
            border-left: none;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
        }
        .form-container .input-group-text:hover {
            background-color: #2d8cf0;
            color: #fff;
        }
        .form-container .btn {
            margin-top: 20px;
            width: 100%;
            height: 40px;
            border-radius: 5px;
            border: 2px solid #323232;
            background-color: #fff;
            box-shadow: 4px 4px #323232;
            font-size: 17px;
            font-weight: 600;
            color: #323232;
            cursor: pointer;
        }
        /* 登录框加载时的动画 */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>

<div class="blur-background"></div>

<div class="form-container">
    <h1>验证码登录</h1>
    <form id="loginForm" action="/verify_code" method="post">
        <div class="mb-3">
            <label for="phone" class="form-label">手机号码:</label>
            <input type="text" class="form-control" id="phone" name="phone" required>
        </div>
        <div class="mb-3">
            <label for="code" class="form-label">验证码:</label>
            <div class="input-group">
                <input type="text" class="form-control" id="code" name="code" required>
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary input-group-text" type="button" id="captcha-btn">获取验证码</button>
                </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary" id="login-btn">验证并登录</button>
    </form>
</div>

 <script>

        document.addEventListener('DOMContentLoaded', function() {
    var captchaButton = document.getElementById('captcha-btn');
    var phoneInput = document.getElementById('phone');
    var codeInput = document.getElementById('code');
    var loginForm = document.getElementById('loginForm');

    // 发送验证码
    captchaButton.addEventListener('click', function() {
        var phone = phoneInput.value;
        if (!phone) {
            alert('请先输入手机号码。');
            return;
        }
        // 使用GET请求发送验证码
        fetch('/send_code?phone=' + encodeURIComponent(phone), {
            method: 'GET',
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(() => {
            alert('验证码发送成功。');
        })
        .catch(error => {
            console.error('Error:', error);
            alert('验证码发送成功。');
        });
    });

    // 验证并登录
    loginForm.addEventListener('submit', function(event) {
        event.preventDefault();
        var phone = phoneInput.value;
        var code = codeInput.value;

        if (!phone || !code) {
            alert('请输入手机号码和验证码。');
            return;
        }

        // 使用POST请求验证验证码
        fetch('/verify_code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            // 将手机号码和验证码作为请求体
            body: JSON.stringify({ phone: phone, code: code })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('验证码错误或已过期，请重试。');
            }
            // 成功则跳转到成功页面
            window.location.href = '/success';
        })
        .catch(error => {
            console.error('Error:', error);
            alert('验证码错误或已过期，请重试。');
        });
    });
});
</script>
</body>
</html>